/** @jsxImportSource @emotion/react */
import * as React from "react";
import {CCell, Table, TableBody, TableRow, Text, TableHead, Cell,} from "customize-easy-ui-component";
import {useMeasureTable} from "../../hook/useMeasure";
import {DirectLink} from "../../../routing/Link";
import {useJudgmentTable} from "../../hook/useJudgment";
import {RepLink} from "../../common/base";

/**比较通用的测量结果记录表
 * @property mem: 备注的存储名
 * @property bhsp: 项目编号的colSpan；
 * @property noxm: 没有项目栏目
 * */
export const MeasureErectingVw = ({orc, rep, label, config, tag = 'Measure', children, mem, bhsp=2, noxm,
                              fixed = ["2.7%", "6%", "3%", "8%", "%", "10%", "4%", "8%", "7.1%", "5.2%"]
                            }: {
               orc: any, rep: any, label: string, config: any[], fixed?: string[], tag?: string, children?: any,mem?: string,
               bhsp?:number, noxm?:boolean
                            }
) => {
  const renderMeasure = useMeasureTable({rep, orc, config});
  const 观测备注: string[] = mem ? orc?.[mem] : '';
  const bzSpan=fixed.length-1;
  return <>
    <Text variant="h4" css={{
      marginTop: '1rem', "@media print": {paddingBottom: '4rem', pageBreakInside: 'avoid'}
    }}>{label}</Text>
    <Table id={tag} fixed={fixed} css={{borderCollapse: 'collapse', "@media print": {marginTop: '-4rem'}} } tight miniw={800}>
      <TableHead>
        <TableRow>
          <CCell><Text css={{fontSize: '0.7rem'}}>序号</Text></CCell>
          <CCell colSpan={bhsp}><Text css={{fontSize: '0.7rem'}}>项目编号</Text></CCell><CCell colSpan={4-bhsp}>检测内容与要求</CCell>
          {!noxm && <CCell>检测项目</CCell>}
          <CCell>单位</CCell><CCell>观测值</CCell><CCell>结果值</CCell><CCell><Text css={{fontSize: '0.75rem'}}>结果判定</Text></CCell>
        </TableRow>
      </TableHead>
      <TableBody>
        <DirectLink href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/${tag}?original=1#${tag}`}>
          {renderMeasure}
          {mem  &&  <TableRow>
            <CCell>备注</CCell>
            <Cell colSpan={bzSpan}>
              <div css={{minHeight: '1rem', whiteSpace: 'pre-wrap'}}>
                {观测备注 || '／'}
              </div>
            </Cell>
          </TableRow>
          }
        </DirectLink>
      </TableBody>
    </Table>
    {children}
  </>;
};

/**可通用： 有判定允许值栏的测量结果记录表
 * @property mem: 备注的存储名
 * config里面的cit：判定标准栏目； allowableV 是录入的栏目。
 * */
export const MeasureAllowableVw = ({orc, rep, label, config, fixed: userFixed, tag = 'Measure', children, mem, nseq
                   }: { orc: any, rep: any, label: string, config: any[], fixed?: string[],
                      tag?: string, children?: any,mem?: string, nseq?:boolean
                   }
) => {
  const fixed=userFixed? userFixed :
      nseq? ["5%", "3%", "7%", "%", "3.8%", "7%", "8%", "7.1%", "5.2%"] :
          ["2.6%", "5%", "3%", "7%", "%", "3.8%", "7%", "8%", "7.1%", "5.2%"];
  //【概念乱】判定栏目和允许值栏目两个实际是不同的。@ 前者是不可以输入的。后者是用户可与修改的录入项。
  //栏目的布局顺序=...单位，判定标准，x项目名字，其它的。  #  检验项目内容【预期布局】colSpan=4;
  const renderMeasure = useJudgmentTable({rep, orc, config, nseq, allowableV:true});
  //普通版  const renderMeasure = useMeasureTable({rep, orc, config, allowableV:true});
  const 观测备注: string[] = mem ? orc?.[mem] : '';
  return <>
    <Text variant="h4" css={{
      marginTop: '1rem', "@media print": {paddingBottom: '4rem', pageBreakInside: 'avoid'}
    }}>{label}</Text>
    <Table id={tag} fixed={ fixed } css={{borderCollapse: 'collapse', "@media print": {marginTop: '-4rem'}}}
                tight miniw={800}>
      <TableHead>
        <TableRow>
          {!nseq &&  <CCell><Text css={{fontSize: '0.7rem'}}>序号</Text></CCell>}
          <CCell colSpan={4}>检验项目内容</CCell><CCell>单位</CCell>
          <CCell>观测值</CCell><CCell>结果值</CCell>
          <CCell>允许偏差</CCell><CCell><Text css={{fontSize: '0.75rem'}}>检验结果</Text></CCell>
        </TableRow>
      </TableHead>
      <TableBody>
        <RepLink ori rep={rep} tag={tag}>
          {renderMeasure}
        </RepLink>
      </TableBody>
    </Table>
    {mem  && <Table id={tag} fixed={ ["5.5%", "%"] } css={{borderCollapse: 'collapse'}} tight miniw={800}>
      <TableBody>
        <RepLink ori rep={rep} tag={tag}>
          <TableRow>
            <CCell>备注</CCell>
            <Cell>
              <div css={{minHeight: '1rem', whiteSpace: 'pre-wrap'}}>
                {观测备注 || '／'}
              </div>
            </Cell>
          </TableRow>
        </RepLink>
      </TableBody>
    </Table>
    }
    {children}
  </>;
};
